<template>
  <div class="cron-tool">
    <h2>Cron 表达式解析</h2>
    <textarea v-model="cronExpression" placeholder="输入 Cron 表达式" rows="2"></textarea>
    <button @click="parseCron">解析表达式</button>
    <div v-if="cronResult" class="result">
      <h3>解析结果:</h3>
      <p>{{ cronResult }}</p>
    </div>
    <hr />
    <h2>Cron 表达式生成</h2>
    <div class="generator">
      <div class="form-group">
        <label>秒:</label>
        <input v-model="gen.second" type="text" placeholder="例如：0" />
      </div>
      <div class="form-group">
        <label>分钟:</label>
        <input v-model="gen.minute" type="text" placeholder="例如：0" />
      </div>
      <div class="form-group">
        <label>小时:</label>
        <input v-model="gen.hour" type="text" placeholder="例如：12" />
      </div>
      <div class="form-group">
        <label>日:</label>
        <input v-model="gen.day" type="text" placeholder="例如：*" />
      </div>
      <div class="form-group">
        <label>月:</label>
        <input v-model="gen.month" type="text" placeholder="例如：*" />
      </div>
      <div class="form-group">
        <label>星期:</label>
        <input v-model="gen.weekday" type="text" placeholder="例如：?" />
      </div>
      <button @click="generateCron">生成表达式</button>
      <div v-if="genExpression" class="result">
        <h3>生成的 Cron 表达式:</h3>
        <p>{{ genExpression }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import cronParser from 'cron-parser';
export default {
  name: 'CronTool',
  data() {
    return {
      cronExpression: '',
      cronResult: '',
      gen: {
        second: '',
        minute: '',
        hour: '',
        day: '',
        month: '',
        weekday: '',
      },
      genExpression: '',
    };
  },
  methods: {
    parseCron() {
      // 从秒开始解析表达式，要求总共 6 个部分：秒 分 时 日 月 星期
      const parts = this.cronExpression.trim().split(/\s+/);
      if (parts.length < 6) {
        this.cronResult = 'Cron 表达式至少需要 6 个部分 (秒 分 时 日 月 星期)';
      } else {
        let resultStr = `秒: ${parts[0]}, 分: ${parts[1]}, 时: ${parts[2]}, 日: ${parts[3]}, 月: ${parts[4]}, 星期: ${parts[5]}`;
        try {
          const interval = cronParser.parseExpression(this.cronExpression, { iterator: true });
          let occurrences = [];
          for (let i = 0; i < 10; i++) {
            const obj = interval.next();
            const formattedTime = new Date(obj.value).toLocaleString("zh-CN", { hour12: false });
            occurrences.push(formattedTime);
          }
          resultStr += '\n最新10次执行时间：\n' + occurrences.join('\n');
        } catch (e) {
          resultStr += '\n计算执行时间错误：' + e.message;
        }
        this.cronResult = resultStr;
      }
    },
    generateCron() {
      // 简单拼接生成表达式，若未填写则默认为 *
      this.genExpression = `${this.gen.second || '*'} ${this.gen.minute || '*'} ${this.gen.hour || '*'} ${this.gen.day || '*'} ${this.gen.month || '*'} ${this.gen.weekday || '*'}`;
    },
  },
};
</script>

<style scoped>
.cron-tool {
  max-width: 600px;
  margin: 0 auto;
}
textarea {
  width: 100%;
  margin: 10px 0;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border-color 0.3s;
}
textarea:focus {
  border-color: #3498db;
}
button {
  padding: 10px 20px;
  margin: 10px 5px 10px 0;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}
button:hover {
  background-color: #2980b9;
}
.result {
  background-color: #ecf0f1;
  padding: 10px;
  border-radius: 4px;
  margin-top: 10px;
  white-space: pre-wrap;
}
.generator .form-group {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.generator label {
  width: 60px;
}
.generator input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border-color 0.3s;
}
.generator input:focus {
  border-color: #3498db;
}
</style> 